<template>
  <view class="item">姓：<input v-model="firstName" /></view>
  <view class="item">名：<input v-model="lastName" /></view>
  <view class="item">姓名：<input v-model="fullName" /></view>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch } from "vue";
let firstName = ref("");
let lastName = ref("");
let fullName = ref("");

// //侦听单个来源
// watch(firstName, (newVal, oldVal) => {
//   console.log(newVal, oldVal, "$$$");
// });

// //侦听多个来源
// watch(
//   [firstName, lastName],
//   (val1, val2) => {
//     fullName.value = val1.join("-");
//   },
//   { immediate: true }
// );
</script>

<style style="less" scoped>
.item {
  display: flex;
}
input {
  border: 1rpx solid #333;
}
</style>
